<template>
  <button
    class="tui-btn"
    :class="[
      zwyHeightSec,
      plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'),
      getDisabledClass(disabled, type, plain),
      getShapeClass(shape, plain),
      getShadowClass(type, shadow, plain),
      bold ? 'tui-text-bold' : '',
      link ? 'tui-btn__link' : '',
    ]"
    :hover-class="[getHoverClass(disabled, type, plain)]"
    :style="{
      width: width,
      height: height,
      lineHeight: height,
      fontSize: size + 'rpx',
      margin: margin,
      borderRadius: width == height ? '100%' : '',
    }"
    :loading="loading"
    :form-type="formType"
    :open-type="openType"
    @getuserinfo="bindgetuserinfo"
    @getphonenumber="bindgetphonenumber"
    @contact="bindcontact"
    @error="binderror"
    :disabled="disabled"
    @tap="handleClick"
    @touchstart="touchstart"
  >
    <view
      class="waves-wrap"
      v-if="showWaves"
      :class="[getShapeClass(shape, false)]"
      :style="{ borderRadius: '100%', borderColor: !showBorder ? 'transparent' : '' }"
    >
      <waves>
        <view :style="{ width: width, height: height }"></view>
      </waves>
    </view>
    <slot></slot>
  </button>
</template>

<script>
import waves from "./waves.vue";
export default {
  components: {
    waves,
  },
  name: "tuiButton",
  emits: ["click", "getuserinfo", "contact", "getphonenumber", "error"],
  // #ifndef MP-QQ
  behaviors: ["wx://form-field-button"],
  // #endif
  props: {
    //样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green
    type: {
      type: String,
      default: "primary",
    },
    //是否加阴影
    shadow: {
      type: Boolean,
      default: false,
    },
    // 宽度 rpx或 %
    width: {
      type: String,
      default: "100%",
    },
    //高度 rpx
    height: {
      type: String,
      default: "96rpx",
    },
    //字体大小 rpx
    size: {
      type: Number,
      default: 32,
    },
    bold: {
      type: Boolean,
      default: false,
    },
    margin: {
      type: String,
      default: "0",
    },
    //形状 circle(圆角), square(默认方形)，rightAngle(平角)
    shape: {
      type: String,
      default: "square",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    //link样式，去掉边框，结合plain一起使用
    link: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    //禁用后背景是否为灰色 （非空心button生效）
    disabledGray: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    formType: {
      type: String,
      default: "",
    },
    openType: {
      type: String,
      default: "",
    },
    index: {
      type: [Number, String],
      default: 0,
    },
    //是否需要阻止重复点击【默认200ms】
    preventClick: {
      type: Boolean,
      default: false,
    },
    showWaves: {
      type: Boolean,
      default: false,
    },
    alwaysSec: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.timer = setTimeout(() => {
      this.zwyHeightSec = "";
    }, 1000);
    if (this.alwaysSec) {
      this.timer = setInterval(() => {
        this.zwyHeightSec = "zwyHeightSec";
        setTimeout(() => {
          this.zwyHeightSec = "";
        }, 1000);
      }, 5000);
    }
  },
  beforeDestroy() {
    if (this.alwaysSec && this.itmer) {
      clearInterval(this.itmer);
    }
  },
  data() {
    return {
      time: 0,
      showBorder: false,
      zwyHeightSec: "zwyHeightSec",
      timer: null,
    };
  },
  methods: {
    touchstart() {
      if (!this.alwaysSec) {
        if (this.showWaves) {
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.showBorder = true;
          this.timer = setTimeout(() => {
            this.showBorder = false;
          }, 400);
        } else {
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.zwyHeightSec = "zwyHeightSec";
          this.timer = setTimeout(() => {
            this.zwyHeightSec = "";
          }, 1000);
        }
      }
    },
    changeBorder(flag) {
      if (this.width != this.height) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.zwyHeightSec = "zwyHeightSec";
        this.timer = setTimeout(() => {
          this.zwyHeightSec = "";
        }, 1000);
      } else {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.showBorder = true;
        this.timer = setTimeout(() => {
          this.showBorder = false;
        }, 400);
      }
      // if(flag){
      // 	if(this.timer){
      // 		clearTimeout(this.timer)
      // 	}
      // 	this.showBorder=true
      // }else{
      // 	this.timer=setTimeout(()=>{
      // 		this.showBorder=false
      // 	},200)
      // }
    },
    handleClick() {
      if (this.disabled) return;
      if (this.preventClick) {
        if (new Date().getTime() - this.time <= 200) return;
        this.time = new Date().getTime();
        setTimeout(() => {
          this.time = 0;
        }, 200);
      }
      this.$emit("click", {
        index: Number(this.index),
      });
    },
    bindgetuserinfo({ detail = {} } = {}) {
      this.$emit("getuserinfo", detail);
    },
    bindcontact({ detail = {} } = {}) {
      this.$emit("contact", detail);
    },
    bindgetphonenumber({ detail = {} } = {}) {
      this.$emit("getphonenumber", detail);
    },
    binderror({ detail = {} } = {}) {
      this.$emit("error", detail);
    },
    getShadowClass: function (type, shadow, plain) {
      let className = "";
      if (shadow && type != "white" && !plain) {
        className = "tui-shadow-" + type;
      }
      return className;
    },
    getDisabledClass: function (disabled, type, plain) {
      let className = "";
      if (disabled && type != "white" && type.indexOf("-") == -1) {
        let classVal = this.disabledGray ? "tui-gray-disabled" : "tui-dark-disabled";
        className = plain ? "tui-dark-disabled-outline" : classVal;
      }
      return className;
    },
    getShapeClass: function (shape, plain) {
      let className = "";
      if (shape == "circle") {
        className = plain ? "tui-outline-fillet" : "tui-fillet";
      } else if (shape == "rightAngle") {
        className = plain ? "tui-outline-rightAngle" : "tui-rightAngle";
      }
      return className;
    },
    getHoverClass: function (disabled, type, plain) {
      let className = "";
      if (!disabled) {
        className = plain ? "tui-outline-hover" : "tui-" + (type || "primary") + "-hover";
      }
      return className;
    },
  },
};
</script>

<style lang="scss" scoped>
.zwyHeightSec::before {
  animation-iteration-count: 1;
}
.waves-wrap {
  z-index: 10;
  position: absolute;
  overflow: hidden;
  border-color: transparent;
  border: 2rpx solid $default-border-color;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.tui-btn-primary {
  background: $theme-color !important;
  color: #fff;
}

.tui-shadow-primary {
  box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
}

.tui-btn-danger {
  background: #eb0909 !important;
  color: #fff;
}

.tui-shadow-danger {
  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
}

.tui-btn-warning {
  background: #fc872d !important;
  color: #fff;
}

.tui-shadow-warning {
  box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
}

.tui-btn-green {
  background: #07c160 !important;
  color: #fff;
}

.tui-shadow-green {
  box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2);
}

.tui-btn-blue {
  background: #007aff !important;
  color: #fff;
}

.tui-shadow-blue {
  box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
}

.tui-btn-white {
  background: #fff !important;
  color: #333 !important;
}

.tui-btn-gray {
  background: #bfbfbf !important;
  color: #fff !important;
}

.tui-btn-black {
  background: #333 !important;
  color: #fff !important;
}
.tui-btn-brown {
  background: #ac9157 !important;
  color: #fff !important;
}

.tui-btn-gray-black {
  background: #f2f2f2 !important;
  color: #333;
}

.tui-btn-gray-primary {
  background: #f2f2f2 !important;
  color: $theme-color !important;
}

.tui-gray-primary-hover {
  background: #d9d9d9 !important;
}

.tui-btn-gray-green {
  background: #f2f2f2 !important;
  color: #07c160 !important;
}

.tui-gray-green-hover {
  background: #d9d9d9 !important;
}

.tui-btn-gray-danger {
  background: #f2f2f2 !important;
  color: #eb0909 !important;
}

.tui-gray-danger-hover {
  background: #d9d9d9 !important;
}

.tui-btn-gray-warning {
  background: #f2f2f2 !important;
  color: #fc872d !important;
}

.tui-gray-warning-hover {
  background: #d9d9d9 !important;
}

.tui-shadow-gray {
  box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
}

.tui-hover-gray {
  background: #f7f7f9 !important;
}

.tui-black-hover {
  background: #555 !important;
  color: #e5e5e5 !important;
}
.tui-brown-hover {
  background: #a37f49 !important;
  color: #e5e5e5 !important;
}

/* button start*/

.tui-btn {
  width: 100%;
  position: relative;
  border: 0 !important;
  border-radius: 6rpx;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
  font-size: $default-font-size !important;
}

.tui-btn::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5) translateZ(0);
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 12rpx;
  border: 0;
}

.tui-text-bold {
  font-weight: bold;
}

.tui-btn-white::after {
  border: 1px solid #bfbfbf;
}

.tui-white-hover {
  background: #e5e5e5 !important;
  color: #2e2e2e !important;
}

.tui-dark-disabled {
  opacity: 0.6 !important;
  color: #fafbfc !important;
}

.tui-dark-disabled-outline {
  opacity: 0.5 !important;
}

.tui-gray-disabled {
  background: #f3f3f3 !important;
  color: #919191 !important;
  box-shadow: none;
}

.tui-outline-hover {
  opacity: 0.5;
}

.tui-primary-hover {
  color: #e5e5e5 !important;
}

.tui-primary-outline::after {
  border: 1px solid $theme-color !important;
}

.tui-primary-outline {
  color: $theme-color !important;
  background: transparent;
}

.tui-danger-hover {
  background: #c80808 !important;
  color: #e5e5e5 !important;
}

.tui-danger-outline {
  color: #eb0909 !important;
  background: transparent;
}

.tui-danger-outline::after {
  border: 1px solid #eb0909 !important;
}

.tui-warning-hover {
  background: #d67326 !important;
  color: #e5e5e5 !important;
}

.tui-warning-outline {
  color: #fc872d !important;
  background: transparent;
}

.tui-warning-outline::after {
  border: 1px solid #fc872d !important;
}

.tui-green-hover {
  background: #06ad56 !important;
  color: #e5e5e5 !important;
}

.tui-green-outline {
  color: #07c160 !important;
  background: transparent;
}

.tui-green-outline::after {
  border: 1px solid #07c160 !important;
}

.tui-blue-hover {
  background: #0062cc !important;
  color: #e5e5e5 !important;
}

.tui-blue-outline {
  color: #007aff !important;
  background: transparent;
}

.tui-blue-outline::after {
  border: 1px solid #007aff !important;
}

/* #ifndef APP-NVUE */
.tui-btn-gradual {
  background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
  color: #fff !important;
}

.tui-shadow-gradual {
  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
}

/* #endif */

.tui-gray-hover {
  background: #a3a3a3 !important;
  color: #898989;
}

/* #ifndef APP-NVUE */
.tui-gradual-hover {
  background: linear-gradient(90deg, #d74620, #cd1225) !important;
  color: #fff !important;
}

/* #endif */

.tui-gray-outline {
  color: #999 !important;
  background: transparent !important;
}

.tui-white-outline {
  color: #fff !important;
  background: transparent !important;
}

.tui-black-outline {
  background: transparent !important;
  color: #333 !important;
}

.tui-gray-outline::after {
  border: 1px solid #ccc !important;
}

.tui-white-outline::after {
  border: 1px solid #fff !important;
}

.tui-black-outline::after {
  border: 1px solid #333 !important;
}

.tui-brown-outline {
  color: #ac9157 !important;
  background: transparent;
}
.tui-brown-outline::after {
  border: 1px solid #ac9157 !important;
}

/*圆角 */

.tui-fillet {
  border-radius: 50rpx;
}

.tui-btn-white.tui-fillet::after {
  border-radius: 98rpx;
}

.tui-outline-fillet::after {
  border-radius: 98rpx;
}

/*平角*/
.tui-rightAngle {
  border-radius: 0;
}

.tui-btn-white.tui-rightAngle::after {
  border-radius: 0;
}

.tui-outline-rightAngle::after {
  border-radius: 0;
}
.tui-btn__link::after {
  border: 0 !important;
}
</style>
